<template>
    <div>
        <transition name="fade">
            <div class="style-3">
                <div class="course_common_box">
                    <div class="course-content">
                        <div v-for="(item,index) in contentInfo.sentences" class="sentence">
                            <!--<p :style="{'display':pinyinSwitch ? 'block':'none'}" class="en">{{item.pinyin || ''}}</p>-->
                            <!--<p class="cn">{{item.chinese}}</p>-->
                            <!--<p class="en">{{item.english}}</p>-->
                            <ruby v-for="(item,i) in pinyin[index]" style="font-size: 20px;margin-left:6px">
                                {{chinese[index][i]}}
                                <rp>
                                    (
                                </rp>
                                <rt :style="{'display':pinyinSwitch ? '':'none','font-size':14+'px'}">
                                    {{item}}
                                </rt>
                                <rp>)
                                </rp>
                            </ruby>
                        </div>
                        <div class="picture" v-if="contentInfo?contentInfo.images:false">
                            <loadingImage :src="addPrefixHost(contentInfo.images)"/>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {mapState, mapGetters, mapActions} from 'vuex';
    import loadingImage from '~/components/loadingImage';
    import R from 'ramda';
    import Vue from 'vue';

    export default {
        async fetch({isServer, redirect, store, params}) {
            (isServer || !params) && redirect("/learner/myCourse");
            params.extendData || await store.dispatch("index/course/index/setContentInfo", params);
        },
        asyncData({params}) {
            return {extendData: params.extendData}
        }, data() {
            return {
                isUpdate: false,
            }
        },
        methods: {
            ...mapActions('index/course/index', [
                'setAnswer'
            ]),
            init() {
                this.$nextTick(_ => {
                })
            }
        },
        mounted() {
            this.init();
        },
        created() {
            console.log(this.content);
        },
        watch: {
            contentInfo() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {};
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600);
                this.init();
            }
        },
        computed: {
            contentInfo() {
                return this.courseExtendInfo || this.extendData || this.contentData;
            },
            ...mapState('index/course/index', {
                courseExtendInfo: state => state.courseExtendInfo,
                contentData: state => state.contentInfo.content,
                templateStyle: state => state.templateStyle,
                content: state => state.contentInfo ? state.contentInfo.content : {},
                contentType: state => state.contentInfo,
                pinyinSwitch: state => state.pinyinSwitch,
            }),
            pinyin() {
                const arr = [];
                const reg = /[（]/g;
                const reg2 = /[）]/g;
                var stn;
                for (let i = 0; i < this.contentInfo.sentences.length; i++) {
                    stn = this.contentInfo.sentences[i].pinyin.replace(reg, "\(").replace(reg2, "\)");
                    arr.push(stn.split(/\s+(?![^\(]*?\))/));
                }
                return arr;
            },
            chinese() {
                const arr = [];
                const reg = /[（]/g;
                const reg2 = /[）]/g;
                var stn;
                for (let i = 0; i < this.contentInfo.sentences.length; i++) {
                    stn = this.contentInfo.sentences[i].chinese.replace(reg, "\(").replace(reg2, "\)");
                    arr.push(stn.split(/\s+(?![^\(]*?\))/));
                }
                return arr;
            }
        },
        components: {
            loadingImage
        }
    }
</script>

<style lang="less" scoped>
    .style-3 {
        .course_common_box {
            text-align: center;
            width: 850px;
            font-size: 18px;
        }
        .course-content {
            display: inline-block;
            text-align: left;
            vertical-align: middle;
        }
        .picture {
            img {
                max-width: 7.5rem;
                max-height: 2rem;
            }
        }
    }

</style>
